import theme from './color';

let themeConfig;
/**
 * 除 series的配置
 * @param {String} themeType 
 */
function initOptionFn(themeType = 'white') {

    themeConfig = theme[themeType];
    /**
     * 默认配置对象
     */
    let initOption = {
        grid: { // 配置图表渲染范围
            left: 10,
            right: 20,
            bottom: 40,
            top: 20,
            containLabel: true
        },
        color: themeConfig.color,//主色调
        tooltip: { //
            trigger: 'axis',
            showDelay: 0,
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                align: 'left'
            }
        },
        legend: {//  
            type: 'scroll',
            show: true,
            left: 'center',
            bottom: 10,
            itemWidth: 10,
            textStyle: {
                color: themeConfig.legendColor
            },
            itemHeight: 10,
            data: [],
            pageTextStyle: {
                color: themeConfig.pageTextStyleColor
            }
        },
        dataZoom: //滚动条
        {
            show: false
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true, //显示刻度在中间
            nameLocation: 'middle',
            splitLine: { // 分割线
                show: false,
                lineStyle: {
                    color: themeConfig.splitLineColor,
                    width: 1
                }
            },
            axisLabel: { // x轴标签
                color: themeConfig.labelColor,
                interval: 'auto',
            },
            axisTick: { // x轴刻度
                show: false,
                lineStyle: {
                    color: themeConfig.axisTickColor,
                }
            },
            axisLine: { // x轴
                show: false,
                lineStyle: {
                    color: themeConfig.axisLineColor
                }
            },
            data: ''
        }],

        yAxis: [{
            name: '',
            type: 'value',
            nameTextStyle: {
                align: 'center',
                color: themeConfig.nameTextStyleColor
            },
            axisLabel: {
                fontSize: 12,
                color: themeConfig.labelColor
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: themeConfig.axisTickColor,
                }
            },
            splitLine: {
                lineStyle: {
                    color: themeConfig.splitLineColor,
                    width: 1
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: themeConfig.axisLineColor
                }
            },
            data: []
        }, {
            name: '',
            type: 'value',
            nameTextStyle: {
                align: 'center',
                color: themeConfig.nameTextStyleColor
            },
            axisLabel: {
                fontSize: 12,
                color: themeConfig.labelColor,
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: themeConfig.axisTickColor,
                }
            },
            splitLine: {
                lineStyle: {
                    color: themeConfig.splitLineColor,
                    width: 1
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: themeConfig.axisLineColor
                }
            },
            data: []
        }]
    };
    return initOption;
}
// series的单独配置
function initSeriesOptionFn() {
    const option = {
        itemStyle: {
            barBorderRadius: 0,
            color: '',
            borderColor: '',
            borderWidth: 0,
            borderType: 'solid',
            barBorderRadius: 0,
            shadowBlur: 0,
            shadowColor: '',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1,
            color: ''
        },
        markLineStyle: {
            color: '#fff',
            lineStyle: {
                type: 'dashed',
                color: '#fff'
            },
            data: [
                [{ type: 'min' }, { type: 'max' }]
            ]

        },
        barMaxWidth: 40,
        barMinWidth: 4,
        label: {
            show: false,
            position: 'inside',
            color: themeConfig.seriesLabelColor,
        },
        showBackground: false,
        backgroundStyle: {
            color: themeConfig.backgroundStyleColor,
            barBorderRadius: 0,
        },
        stack: false,
    };
    return option;
}

/**
 * 
 * @param {Object} data 为数据源，
 * @param {Object} setting 为配置源
 */
export function defaultSetting(data = {}, { series = {}, theme, xAxis = {}, yAxis = {}, yAxisName = [], yAxisType = [], color = [], legend = {}, grid = {} } = {}) {

    let initOption = initOptionFn(theme);
    if (!window.echarts) {
        console.log(('请先引入echarts4.80及以上'));
        return;
    }
    if (!Array.isArray(data.series)) {
        console.log('series请输入数组')
        return;
    }
    let ySiteRight = series.ySiteRight || [];
    let xAxisData = [];
    let dataTemp = { ...data };
    dataTemp.series.map(item => {
        for (let i in item) {
            if (data.dimension.indexOf(i) > -1) {
                xAxisData.push(item[i]);
                // delete item[i];
            }
        }
    });
    // y轴坐标配置
    if (yAxisName && yAxisName.length > 0) {
        initOption.grid.top = 35;

        initOption.yAxis[0].name = yAxisName[0] || '';
        if (yAxisName.length > 1) {
            initOption.yAxis[1].name = yAxisName[1] || '';
            initOption.yAxis[1].axisLine = Object.assign({}, initOption.yAxis[1].axisLine, yAxis.axisLine);
        }
    }
    /**
     * 配置坐标轴%
     */
    if (yAxisType.length > 0) {
        if (yAxisType[0] == 'percent') {
            initOption.yAxis[0].axisLabel.formatter = "{value}%";

        }
        if (yAxisType[1] == 'percent') {
            initOption.yAxis[1].axisLabel.formatter = "{value}%";
        }
        if (yAxisType.indexOf('percent') > -1) {
            let marker, unit;
            initOption.tooltip.formatter = function (val) {
                let html = `${val[0].name}<br />`;
                val.map((item, index) => {
                    unit = '';
                    if (ySiteRight.length > 0 && ySiteRight.indexOf(item.seriesName) > -1) {
                        unit = '%';
                    }
                    if (item.color && item.color.type == 'linear') {
                        let color = `linear-gradient(${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})`;
                        marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image:${color};"></span>`;
                    } else {
                        marker = item.marker;
                    }
                    html += `${marker}${item.seriesName}: ${item.value}${unit}<br />`
                })
                return html;

            }
        }

    }
    // 全局属性配置
    initOption.color = Array.isArray(color) ? [...color, ...initOption.color] : color;
    initOption.legend = Object.assign({}, initOption.legend, legend);
    initOption.legend.data = data.legend.data || [];
    initOption.grid = Object.assign({}, initOption.grid, grid);

    // x轴属性配置
    initOption.xAxis[0].axisTick = Object.assign({}, initOption.xAxis[0].axisTick, xAxis.axisTick);
    initOption.xAxis[0].axisLine = Object.assign({}, initOption.xAxis[0].axisLine, xAxis.axisLine);
    initOption.xAxis[0].splitLine = Object.assign({}, initOption.xAxis[0].splitLine, xAxis.splitLine);
    initOption.xAxis[0].axisLabel = Object.assign({}, initOption.xAxis[0].axisLabel, xAxis.axisLabel);
    initOption.xAxis[0].data = xAxisData;
    initOption.xAxis[0].type = xAxis.type || initOption.xAxis[0].type;

    // y轴属性配置
    initOption.yAxis[0].type = yAxis.type || initOption.yAxis[0].type;
    initOption.yAxis[0].axisLine = Object.assign({}, initOption.yAxis[0].axisLine, yAxis.axisLine);
    initOption.yAxis[0].axisTick = initOption.yAxis[1].axisTick = Object.assign({}, initOption.yAxis[0].axisTick, yAxis.axisTick);
    initOption.yAxis[0].splitLine = initOption.yAxis[1].splitLine = Object.assign({}, initOption.yAxis[0].splitLine, yAxis.splitLine);
    initOption.yAxis[0].axisLabel = Object.assign({}, initOption.yAxis[0].axisLabel, yAxis.axisLabel);
    initOption.yAxis[0].nameTextStyle = initOption.yAxis[1].nameTextStyle = Object.assign({}, initOption.yAxis[0].nameTextStyle, yAxis.nameTextStyle);

    if (yAxis.type == 'category') {
        initOption.yAxis[0].data = xAxisData;
    }

    return initOption;
}

/**
 * 
 * @param {Object} data 为数据源，
 * @param {Object} setting 为配置源
 */
export function defaultSeries(data = {}, { stack = {}, markLine, showLine = [], linear = {}, ySiteRight = [], itemStyle = {}, barBorderRadius, showBackground, backgroundStyle, label = {}, markLineStyle = {}, barWidth } = {}) {
    let initOption = initSeriesOptionFn();

    initOption.itemStyle = Object.assign({}, initOption.itemStyle, itemStyle);
    initOption.itemStyle.barBorderRadius = barBorderRadius || initOption.itemStyle.barBorderRadius;

    initOption.showBackground = showBackground || initOption.showBackground;
    initOption.backgroundStyle = backgroundStyle || initOption.backgroundStyle;
    initOption.label = Object.assign({}, initOption.label, label);

    let seriesData = [], obj = {};
    let markLineStyleTemp = Object.assign({}, markLineStyle, initOption.markLineStyle);
    /**
     * 核心处理数据代码
     */
    for (let i of data.series) {
        for (let n in i) {
            if (data.legend.data.indexOf(n) > -1) {
                obj[n] ? obj[n].push(i[n]) : (obj[n] = []) && obj[n].push(i[n]);
            }
        }
    }
    /**
     * 核心处理数据代码
     */
    for (const [keys, values] of Object.entries(obj)) {

        let barWidthTemp = '';
        if (barWidth && typeof (barWidth) == 'number') {
            barWidthTemp = barWidth;
        } else if (barWidth && Object.keys(barWidth).length > 0) {
            barWidthTemp = barWidth[keys] || 12;
        } else if (values.length <= 8) {
            barWidthTemp = 12;
        }
        let itemStyle = {};
        if (linear && Object.keys(linear).indexOf(keys) > -1 && linear[keys].length > 0) {
            if (linear[keys].length == 1) {
                linear[keys][1] = linear[keys][0];
            }
            itemStyle.color = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: linear[keys][0] || ''
            }, {
                offset: 1,
                color: linear[keys][1] || ''
            }], false)
        } else {
            itemStyle.color = '';
        }
        let stackTemp = false;
        if (stack && Object.keys(stack).indexOf(keys) > -1) {
            stackTemp = stack[keys];
        } else {
            stackTemp = false;
        }
        seriesData.push({
            name: keys,
            data: values,
            markLine: markLine && markLine.indexOf(keys) > -1 ? markLineStyleTemp : {},
            type: showLine && showLine.indexOf(keys) > -1 ? 'line' : 'bar',
            barWidth: barWidthTemp,
            yAxisIndex: ySiteRight.indexOf(keys) > -1 ? 1 : 0,
            smooth: true,
            ...initOption,
            ...itemStyle,
            stack: stackTemp,
        });
    }
    return seriesData
}